<template>
  <div class="preview-box">
    <div v-loading="loading">
      <div class="preview-title">
        <span>{{ merchantTitle.basicTitle }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <span>商户类型：{{ merchantForm.userTypeName }}</span>
        </el-col>
        <el-col :span="8">
          <span
            >行业类型：{{ merchantForm.ysMerchantType }}/{{ merchantForm.industryName }}/{{
              merchantForm.mccDes
            }}</span
          >
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="merchantForm.userType == '3'">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.handHeldUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.handHeldUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">法人手持身份证</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.cardFrontUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.cardFrontUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">法人身份证人像面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.cardReverseUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.cardReverseUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">法人身份证国徽面</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <span>法人姓名：{{ merchantForm.legalPersonName }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人性别：{{ merchantForm.crpGenderName }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人电话：{{ merchantForm.legalPersonPhone }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人职业：{{ merchantForm.crpProfessionName }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人职务：{{ merchantForm.crpProfessionLittleName }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人身份证号：{{ merchantForm.legalPersonId }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人身份证开始日期：{{ merchantForm.legalPersonIdSdate }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人身份证截止日期：{{ merchantForm.legalPersonIdEdate }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人省市区：{{ merchantForm.legalProvinceName }}/{{ merchantForm.legalCityName }}/{{ merchantForm.legalAreaName }}</span>
        </el-col>
        <el-col :span="8">
          <span>法人地址：{{ merchantForm.crpAddr }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="merchantForm.licensePicUrl">
        <el-col :span="8">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.licensePicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.licensePicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">营业执照原件照片</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="merchantForm.licensePicUrl">
        <el-col :span="8" v-if="merchantForm.registeredName">
          <span>注册名称：{{ merchantForm.registeredName }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.businessLicence">
          <span>门头名称：{{ merchantForm.businessLicence }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.userShortName">
          <span>商户简称：{{ merchantForm.userShortName }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.businessRegisteredCapital">
          <span>注册资金：{{ merchantForm.businessRegisteredCapital }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.businessLicenceNo">
          <span>社会信用代码：{{ merchantForm.businessLicenceNo }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.businessLicenceSDate">
          <span>营业执照开始日期：{{ merchantForm.businessLicenceSDate }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.businessLicenceEDate">
          <span>营业执照截止日期：{{ merchantForm.businessLicenceEDate }}</span>
        </el-col>
        <el-col :span="8">
          <span>所在区域：{{ merchantForm.mercProv }}/{{ merchantForm.mercCity }}/{{ merchantForm.mercArea }}</span>
        </el-col>
        <el-col :span="24">
          <span>经营地址：{{ merchantForm.contactsAddr }}</span>
        </el-col>
        <el-col :span="24" v-if="merchantForm.businessScope">
          <span>经营范围：{{ merchantForm.businessScope }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="merchantForm.authLetterPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.authLetterPicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.authLetterPicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">业务办理授权函</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.contactFrontPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.contactFrontPicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.contactFrontPicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">联系人身份证人像面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.contactReversePicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.contactReversePicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.contactReversePicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">联系人身份证国徽面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <span>联系人姓名：{{ merchantForm.contactsName }}</span>
        </el-col>
        <el-col :span="8">
          <span>联系人电话：{{ merchantForm.contactsPhone }}</span>
        </el-col>
        <el-col :span="8">
          <span>联系人性别：{{ merchantForm.contactsGenderName }}</span>
        </el-col>
        <el-col :span="8">
          <span>联系人邮箱：{{ merchantForm.contactsEmail }}</span>
        </el-col>
        <el-col :span="8">
          <span>联系人身份证号：{{ merchantForm.contactPersonId }}</span>
        </el-col>
        <el-col :span="8">
          <span>联系人身份证开始日期：{{ merchantForm.idValiddateBegin }}</span>
        </el-col>
        <el-col :span="8">
          <span>联系人身份证截止日期：{{ merchantForm.idValiddateEnd }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.projectBankName">
          <span>联合收单银行：{{ merchantForm.projectBankName }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.remark">
          <span>备注：{{ merchantForm.remark }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="merchantForm.holdPrsnIsLegal == '0'">
        <el-col :span="8" v-if="merchantForm.holdPrsnCertMfgPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.holdPrsnCertMfgPicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.holdPrsnCertMfgPicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">控股人身份证人像面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.holdPrsnCertExpPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.holdPrsnCertExpPicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.holdPrsnCertExpPicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">控股人身份证国徽面</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="merchantForm.holdPrsnIsLegal == '0'">
        <el-col :span="8">
          <span>控股人姓名：{{ merchantForm.holdPrsnCertName }}</span>
        </el-col>
        <el-col :span="8">
          <span>控股人联系方式：{{ merchantForm.holdPrsnMobile }}</span>
        </el-col>
        <el-col :span="8">
          <span>控股人性别：{{ merchantForm.holdPrsnGenderName }}</span>
        </el-col>
        <el-col :span="8">
          <span>控股人身份证号：{{ merchantForm.holdPrsnCertNo }}</span>
        </el-col>
        <el-col :span="8">
          <span>控股人身份证开始日期：{{ merchantForm.holdPrsnCertMfgDate }}</span>
        </el-col>
        <el-col :span="8">
          <span>控股人身份证截止日期：{{ merchantForm.holdPrsnCertExpDate }}</span>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="merchantForm.receiptorIsLegal == '0'">
        <el-col :span="8" v-if="merchantForm.receiptorCertMfgPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.receiptorCertMfgPicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.receiptorCertMfgPicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">受益人身份证人像面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.receiptorCertExpPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
                <el-image
                style="width: 100%; height: 100%"
                :src="merchantForm.receiptorCertExpPicUrl"
                z-index="5000"
                :preview-src-list="[merchantForm.receiptorCertExpPicUrl]"
                fit="contain"
                >
                </el-image>
                <div class="preview-text">受益人身份证国徽面</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="merchantForm.receiptorIsLegal == '0'">
        <el-col :span="8">
          <span>受益人姓名：{{ merchantForm.receiptorName }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人联系方式：{{ merchantForm.receiptorMobile }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人性别：{{ merchantForm.receiptorGenderName }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人身份证号：{{ merchantForm.receiptorCertNo }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人身份证开始日期：{{ merchantForm.receiptorCertMfgDate }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人身份证截止日期：{{ merchantForm.receiptorCertExpDate }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人所在区域：{{ merchantForm.receiptorProvCodeName }}/{{ merchantForm.receiptorCityCodeName }}/{{ merchantForm.receiptorCountyCodeName }}</span>
        </el-col>
        <el-col :span="8">
          <span>受益人详细地址：{{ merchantForm.receiptorAdderss }}</span>
        </el-col>
      </el-row>

      <div class="preview-title">
        <span>{{ merchantTitle.cardTitle }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <span>结算卡类型：{{ merchantForm.balanceAccTypeName }}</span>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="8" v-if="merchantForm.ecardFrontUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.ecardFrontUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.ecardFrontUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">非法人身份证人像面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.ecardReverseUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.ecardReverseUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.ecardReverseUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">非法人身份证国徽面</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="merchantForm.accountFrontUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.accountFrontUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.accountFrontUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">结算卡正面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.accountReverseUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.accountReverseUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.accountReverseUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">结算卡反面</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.billingAttorneyUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.billingAttorneyUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.billingAttorneyUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">非法人结算授权书图片</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="merchantForm.openPermitUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.openPermitUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.openPermitUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">开户许可证</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="merchantForm.unincorporatedName">
          <span>非法人姓名：{{ merchantForm.unincorporatedName }}</span>
        </el-col>
        <el-col :span="8" v-if="merchantForm.unincorporatedId">
          <span>非法人身份证号：{{ merchantForm.unincorporatedId }}</span>
        </el-col>
        <el-col :span="8">
          <span>开户账户名称：{{ merchantForm.balanceAccName }}</span>
        </el-col>
        <el-col :span="8">
          <span>开户账户卡号：{{ merchantForm.balanceAccCardNo }}</span>
        </el-col>
        <el-col :span="8">
          <span>银行预留手机号：{{ merchantForm.bankMobile }}</span>
        </el-col>
        <el-col :span="8">
          <span>开户行名称：{{ merchantForm.bankName }}</span>
        </el-col>
        <el-col :span="8">
          <span>开户支行名称：{{ merchantForm.openAccBankName }}</span>
        </el-col>
        <el-col :span="8">
          <span
            >开户行省市区：{{ merchantForm.openAccProvince }}/{{
              merchantForm.openAccCity
            }}/{{ merchantForm.openAccArea }}</span
          >
        </el-col>
      </el-row>
      <div class="preview-title">
        <span>{{ merchantTitle.rateTitle }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="24" v-for="(item, index) in merchantForm.list" :key="index">
          <span class="haruyuki-mr-20">通道名称：{{ item.aisleName }}</span>
          <span class="haruyuki-mr-20">扫码签约费率：{{ item.codeScanningRate }}%</span>
          <span class="haruyuki-mr-20">扫码垫资费率：{{ item.codeAdvanceRate }}%</span>
          <span class="haruyuki-mr-20" v-if="item.t112Rate&&item.isShowPlus === '1'">刷卡贷记卡费率：{{ item.t112Rate }}%</span>
          <span class="haruyuki-mr-20" v-if="item.t111Rate&&item.isShowPlus === '1'">刷卡借记卡费率：{{ item.t111Rate }}%</span>
          <span class="haruyuki-mr-20" v-if="item.d011RateTop&&item.isShowPlus === '1'">刷卡借记卡封顶：{{ item.d011RateTop }}元</span>
          <span class="haruyuki-mr-20" v-if="item.d0AdvanceDsignFee&&item.isShowPlus === '1'">刷卡贷记卡垫资费率：{{ item.d0AdvanceDsignFee }}%</span>
          <span class="haruyuki-mr-20" v-if="item.d0AdvanceJsignFee&&item.isShowPlus === '1'">刷卡借记卡垫资费率：{{ item.d0AdvanceJsignFee }}%</span>
          <span class="haruyuki-mr-20" v-if="item.waveRate&&item.isShowPlus === '1'">云闪付优惠：{{ item.waveRate }}%</span>
          <span class="haruyuki-mr-20" v-if="item.creditRate1&&item.isShowPlus === '1'">云闪付贷记卡大额：{{ item.creditRate1 }}%</span>
          <span class="haruyuki-mr-20" v-if="item.debitRate1&&item.isShowPlus === '1'">云闪付借记卡大额：{{ item.debitRate1 }}%</span>
          <span class="haruyuki-mr-20" v-if="item.debitMax1&&item.isShowPlus === '1'">云闪付借记卡封顶：{{ item.debitMax1 }}元</span>
        </el-col>
      </el-row>
      <div class="preview-title">
        <span>{{ merchantTitle.shopTitle }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.merchantDoorUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.merchantDoorUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">商户门头照片</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.interiorUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.interiorUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">内景照片</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.checkoutCounterUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.checkoutCounterUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">收银台照片</div>
            </div>
          </div>
        </el-col>

        <el-col :span="8" v-if="merchantForm.acquiringUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.acquiringUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.acquiringUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">收单协议首页</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.stampUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.stampUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.stampUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">收单协议盖章页</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.businessUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.businessUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.businessUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">经营业务</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.leaseholdFirstUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.leaseholdFirstUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.leaseholdFirstUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">租赁合同第一页</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.leaseholdSecondUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.leaseholdSecondUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.leaseholdSecondUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">租赁合同第二页</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.leaseholdThirdUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.leaseholdThirdUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.leaseholdThirdUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">租赁合同第三页</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.areaPicUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.areaPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.areaPicUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">租赁面积</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.authCerUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.authCerUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.authCerUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">授权书</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.positioningPhotoUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.positioningPhotoUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.positioningPhotoUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">定位照</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" v-if="merchantForm.clientPhotoUrl">
          <div class="preview-photo-frame">
            <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.clientPhotoUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.clientPhotoUrl]"
              fit="contain"
              >
              </el-image>
              <div class="preview-text">客户经理与客户合影照片</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "merchant-preview",
  props: {
    merchantForm: Object,
    loading: {
			type: Boolean,
			default: false
		}
  },
  data() {
    return {
      merchantTitle: {
        basicTitle: "基本信息",
        cardTitle: "结算账户",
        rateTitle: "费率信息",
        shopTitle: "协议信息",
      },
      aisleList: [],
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.preview-title {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
  span {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
span {
  // display: block;
  font-size: 14px;
}

.preview-photo-frame {
  border-radius: 10px;
  // padding: 14px;
  height: auto;
  background: #ececec;
  .preview-img {
    border-radius: 10px;
    width: 100%;
    height: 140px;
    position: relative;
    .preview-text {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 30px;
      line-height: 30px;
      text-align: center;
      width: 100%;
      // background-color: #979797;
      color: #ffffff;
      border-radius: 0 0 10px 10px;
      background-color:rgba(185,185,185,0.8);
    }
  }
}
</style>